<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchNo']" placeholder="商户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />

        <jeepay-text-up v-model:value="vdata.searchData['receiverGroupId']" :placeholder="'组ID'" />
        <jeepay-text-up v-model:value="vdata.searchData['receiverGroupName']" :placeholder="'组名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['autoDivisionFlag']" placeholder="是否自动分账组">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="receiverGroupId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_DIVISION_RECEIVER_GROUP_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'autoDivisionFlag'">
            <a>{{ record.autoDivisionFlag === 1 ? '是' : '否' }}</a>
          </template>
          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <a-button v-if="$access('ENT_DIVISION_RECEIVER_GROUP_EDIT')" type="link" style="padding-left: 10px;padding-right: 10px;" @click="editFunc(record.receiverGroupId)">修改</a-button>
            <a-button v-if="$access('ENT_DIVISION_RECEIVER_GROUP_DELETE')" type="link" style="color: red" @click="delFunc(record.receiverGroupId)">删除</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_DIVISION_RECEIVER_GROUP, req } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { useRoute } from 'vue-router'
import { reactive, onMounted, ref, getCurrentInstance } from 'vue'
const { $access,$infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([
  { key: 'receiverGroupId', title: '组ID', dataIndex: 'receiverGroupId' },
  { key: 'mchNo', title: '商户号', dataIndex: 'mchNo'  },
  { key: 'mchName', title: '商户名称', dataIndex: 'mchName'  },
  { key: 'receiverGroupName', title: '组名称', dataIndex: 'receiverGroupName' },
  { key: 'autoDivisionFlag', title: '自动分账组', dataIndex: 'autoDivisionFlag' },
  { key: 'createdBy', title: '创建人', dataIndex: 'createdBy' },
  { key: 'createdAt', title: '创建时间', dataIndex: 'createdAt' },
  { key: 'op', title: '操作',  fixed: 'right', align: 'center' }
])

const infoAddOrEdit  =ref()
const infoTable = ref()
const vdata = reactive ({
  tableColumns: tableColumns,
  searchData: {} as any,
  btnLoading: false
})

    const queryFunc = () => {
      
      vdata.btnLoading = true
      infoTable.value.refTable(true)
    }

    onMounted(() => {
      vdata.searchData['mchNo'] = useRoute().query.mchNo
      queryFunc()
    })

    // 请求table接口数据
    function reqTableDataFunc(params){
      return req.list(API_URL_DIVISION_RECEIVER_GROUP, params)
    }

    function searchFunc () { // 点击【查询】按钮点击事件
      vdata.btnLoading = true // 打开查询按钮上的loading
      infoTable.value.refTable(true)
    }

    function addFunc() { // 业务通用【新增】 函数
      infoAddOrEdit.value.show(vdata.searchData['mchNo'])
    }

    function editFunc(recordId) { // 业务通用【修改】 函数
      infoAddOrEdit.value.show(vdata.searchData['mchNo'], recordId)
    }

    function delFunc (recordId) { // 业务通用【删除】 函数
     $infoBox.confirmDanger('确认删除？', '', () => {
        // 需要【按钮】loading 请返回 promise对象， 不需要请直接返回null
        return req.delById(API_URL_DIVISION_RECEIVER_GROUP, recordId).then(res => {
          $infoBox. message.success('删除成功！')
         infoTable.value.refTable(false)
        })
      })
    }
</script>
